<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}

		.content .paret{
			width: 304px;
			height: 537px;
			position: absolute;
			left: 50%;
			margin-left: -150px;
			margin-top: 50px;
			cursor: pointer;
			z-index: 999;
		}

		.content .marg{
			width: 300px;
			border: 2px solid #ccc;
			position: absolute;
			left: 50%;
			margin-left: -150px;
			margin-top: 50px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}

		.content .paret:hover{
			border-color: #DDA0DD;
			box-shadow: 0 4px 8px 0 rgba(199, 21, 133, 0.2), 0 6px 20px 0 rgba(199, 21, 133, 0.19);
		}

		.content .padd{
			width: 200px;
			display: none;
			border: 2px solid #000;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: 10px 0 0 -100px;
		}

		.content .animate{
			animation: ball .5s;
		}

		.content .remove{
			animation: balll .5s;
		}

		@-webkit-keyframes ball {
		  0% {
		    -webkit-transform: scale(0) rotate(30deg);
		            transform: scale(0) rotate(30deg);
		    }

		  100% {
		  	 -webkit-transform: scale(1) rotate(360deg);
		            transform: scale(1) rotate(360deg);
		    }
		}

		@-webkit-keyframes balll {
		  0% {
		    -webkit-transform: scale(1) rotate(360deg);
		            transform: scale(1) rotate(360deg);
		    }

		  100% {
		  	 -webkit-transform: scale(0) rotate(30deg);
		            transform: scale(0) rotate(30deg);
		    }
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="paret"></div>
		<img class="marg" src="img/2.jpg" alt="">
		<img class="padd" src="img/liantu .png" alt="">
	</div>

	<script src="../lib/jquery.min.js"></script>
	<script>
		!function(window,document,$,undefined) {

			var init = function() {

				var $marg = $('.content').find('.marg'),
					$padd = $('.content').find('.padd');


				$('.paret')
					.on('mouseover',function() {
						$padd.show();
						$padd.addClass('animate').removeClass('remove')
					})
					.on('mouseout',function() {
						$padd.addClass('remove').removeClass('animate')
						setTimeout(function() {
							$padd.fadeOut()
						},100)
					})

			}

			$(document).ready(init);

		}(window,document,jQuery)
	</script>
</body>
</html>